<template>
	<view class="cate-two cate-bg-gray" style="height: 100%;">
		<view class="aside">
			<scroll-view style="height: 100%" scroll-y="true" scroll-with-animation="true">
				<block v-for="(item, index) in cateList" :key="index">
					<view :class="'one-item sm ' + (index == selectIndex ? 'active' : '')" @click="changeActive(index)">
						<text class="name">{{ item.name||item.title }}</text>
						<view v-if="index == selectIndex" class="active-line bg-primary"></view>
					</view>
				</block>
			</scroll-view>
		</view>
		<view class="main bg-body">
			<view class="third_cate_list">
				<view v-if="thirdCateList" v-for="(third, i) in thirdCateList" :key="i">
					<view class="third_cate_item" @click="goPage(third, i)">{{third.name}}</view>
				</view>
				<view v-if="!thirdCateList">
					<view class="third_cate_item">暂无分类</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getListByLevelOne,
		getGoodsList
	} from '@/api/store'
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		loadingType
	} from '@/utils/type.js'
	import Cache from '@/utils/cache'
	import {
		TABBAROPTION,
	} from '@/config/cachekey';

	export default {
		name: "cate-cate-two",
		props: {
			cateList: {
				type: Array,
				default: () => ([])
			},
			firstcurrid: {
				type: Number,
				default: 0
			},
			firstcatid: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				tabBarOptions: {},
				selectIndex: 0,
				sortConfig: {
					goodsType: 'double',
					priceSort: '',
					saleSort: '',
				},
				status: loadingType.LOADING,
				hasData: true,
				imgUrl: `${this.$imgUrl}/wechat`,
				currentCate2Id: 0,
				currentCate2Name: '',
			};
		},
		mounted() {
			this.currentCate2Name = this.cateList[this.selectIndex].name;
			console.log('=====mounted============');
			console.log(this.selectIndex);
		},
		methods: {
			goPage(item, i) {
				console.log('====cate-cate-two=====item========');
				console.log(item);
				let selected_cats_index = this.firstcurrid + '_' + this.selectIndex + '_' + i;
				let jump_url = '/pages/goods_list/goods_list?firstcatid=' + this.firstcatid + '&selected_cats_index=' + selected_cats_index;
				if (item.id_type) {
					jump_url = jump_url + '&' + item.id_type + '=' + item.id + '&pagetitle=' + item.name
				} else {
					jump_url = jump_url + '&pagetitle=' + this.currentCate2Name + '&currentCate3Id=' + item.id
				}
				console.log(jump_url);
				uni.navigateTo({
					url: jump_url
				})
			},
			changeActive(index) {
				this.selectIndex = index;
				this.currentCate2Id = this.cateList[index].id;
				this.currentCate2Name = this.cateList[index].name;
				console.log('====changeActive(index)========', this.cateList[index]);
			},
			// onRefresh() {
			// 	this.status = loadingType.LOADING
			// 	this.page = 1
			// 	this.goodsList = []
			// 	this.getGoodsListFun()
			// },
		},
		computed: {
			...mapGetters(['appConfig']),
			thirdCateList() {
				return this.cateList[this.selectIndex] && this.cateList[this.selectIndex].children ? this.cateList[this
					.selectIndex].children : [];
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cate-two {
		display: flex;
		flex-direction: row;

		.aside {
			width: 180rpx;
			flex: none;
			height: 100%;
			font-size: smaller;

			.one-item {
				position: relative;
				text-align: center;
				padding: 32rpx 10rpx;
				border-bottom: 1rpx solid white;
				background-color: $-color-body-grey-bg;

				&.active {
					color: $-color-primary;
					font-weight: bold;
					background-color: white;
					// border-bottom: $-color-green solid 2rpx;
				}

				.active-line {
					position: absolute;
					width: 60rpx;
					height: 8rpx;
					left: 60rpx;
					top: 80%;
					transform: translateY(-50%);
				}
			}
		}

		.main {
			height: 100%;
			flex: 1;
			width: 520rpx;

			.third_cate_list {
				padding-left: 40rpx;

				.third_cate_item {
					font-size: smaller;
					padding: 30rpx 10rpx 30rpx 10rpx;
					border-bottom: $-color-gray2 1rpx solid;
				}
			}
		}
	}
</style>